<template>
  <view :class="theme">

    <view class="m-30 b-rounded-16 overflow-hidden">
      <label class="bg-primary text-32 fw-bold" style="padding: 30rpx 50rpx;">认证身份信息</label>
      <view class="bg-section" style="padding: 12rpx 50rpx 50rpx;">
        <label class="h-100" style="border-bottom: 1rpx solid #444;">
          <text class="text-28 color-placeholder">真实姓名</text>
          <input v-model="formData.realName" :disabled="!!userInfo.is_auth" class="flex-1 text-28 pl-40 pr-40" type="text"
            maxlength="21" placeholder="请输入真实姓名" placeholder-class="color-grey" />
        </label>
        <label class="h-100" style="border-bottom: 1rpx solid #444;">
          <text class="text-28 color-placeholder">身份证号</text>
          <input v-model="formData.idNumber" :disabled="!!userInfo.is_auth" class="flex-1 text-28 pl-40 pr-40" type="text"
            maxlength="18" placeholder="请输入身份证号" placeholder-class="color-grey" />
        </label>
        <!-- <picker mode="multiSelector" :disabled="!!userInfo.is_auth" :range="range" range-key="label" @change="changeArea"
          @columnchange="columnChange">
          <label class="h-100" style="border-bottom: 1rpx solid #444;">
            <text class="text-28 color-placeholder">所在位置</text>
            <text :class="[formData.area.value ? '' : 'color-grey', 'flex-1 text-28 pl-40 pr-40']">
              {{ formData.area.value || "请选择省、市" }}
            </text>
            <uv-icon size="32" color="#999" name="arrow-down" />
          </label>
        </picker> -->
        <view class="mt-30 color-placeholder lh-loose">
          <!-- <text>
            <text class="color-stress">*</text>
            <text>请先安装支付宝并登录已实名的账号后进行认证。</text>
          </text> -->
          <text>
            <text class="color-stress">*</text>
            <text>为保障用户账号安全，需进行身份验证，平台不会在任何情况下泄露您的消息。</text>
          </text>
        </view>
      </view>
    </view>
    <button @click="submit" :disabled="!!userInfo.is_auth" hover-class="op-60"
      class="bg-primary color-base mt-120 ml-50 mr-50 b-rounded-16 fw-bold">
      {{ ["立即认证", "已完成认证"][userInfo.is_auth] }}
    </button>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { isIdCard, debounce, uniNavigator, transformURL, pickObjectProperty, sleep } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import area from "@/static/server/json/area.json";

import { ref, reactive, computed } from "vue";
const { $config = {} } = getApp().globalData || {};
const rangeIndex = reactive([0, 0]);
const range = computed(() => [
  area.map(item => pickObjectProperty(["pid", "value", "label"], item)),
  area[rangeIndex[0]].children.map(item => pickObjectProperty(["pid", "value", "label"], item)),
]);
const columnChange = ({ detail }: any) => {
  rangeIndex[detail.column] = detail.value;
}

const changeArea = () => {
  const result = rangeIndex.map((item, index) => range.value[index][item]);
  formData.area.id = result.map(item => item.value).join(",");
  formData.area.value = result.map(item => item.label).join(" ");
}

const { theme } = useMapState(["theme"]);
const formData = reactive({
  realName: "",
  idNumber: "",
  area: {
    id: "",
    value: ""
  }
});

const userInfo = ref<any>({
  is_auth: 0
});

onLoad(() => {
  getUserInfo();
});

const getUserInfo = () => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      uni.hideToast();
      userInfo.value = data;
      if (data.is_auth) {
        formData.realName = data.userData?.idname || "";
        formData.idNumber = data.userData?.idcard || "";
        formData.area = data.userData?.address || { id: "", value: "" };
      }
    }
  });
}

const submit = debounce(() => {
  if (!formData.realName) {
    uni.showToast({ title: "请输入真实姓名", icon: "none" });
    return;
  }
  if (!isIdCard(formData.idNumber)) {
    uni.showToast({ title: "请输入正确的身份证号", icon: "none" });
    return;
  }
  uni.showToast({ icon: "loading", mask: true, duration: 9000 });

  uni.request({
    url: "/authRealName",
    data: {
      name: formData.realName,
      id_card: formData.idNumber,
    },
    async success({ msg: title }: any) {
      uni.showToast({ title, duration: 1200 });
      await sleep(1.2);
      getUserInfo();
    }
  });
}, 500);
</script>

<style lang="scss" scoped>
// scss
</style>